Event（事件）是什麼？

Event 就是「網頁上發生的事情」，例如：

• 使用者點擊按鈕
• 使用者輸入文字
• 滑鼠移到某個元素上
• 頁面載入完成

簡單說：只要使用者做了什麼動作，瀏覽器就會產生一個「事件」

為什麼要用 Event？

想像你開了一間早餐店：

客人按了門鈴 → 你要去開門
客人喊「老闆」 → 你要過去點餐

如果沒有「事件」機制，你就得一直盯著門口、一直聽有沒有人叫你，這樣很浪費力氣。
有了 event，你可以說：「只要門鈴響了，就執行『開門』這個動作」，平常你可以去做別的事，事件發生時瀏覽器會自動通知你。
這就是 JavaScript 常說的 「event-driven（事件驅動）」：程式不是從頭到尾照順序跑，而是「等事情發生才反應」

基本語法：addEventListener

元素.addEventListener("事件名稱", function () {
  // 事件發生時要做的事
});

情境範例：早餐店點餐按鈕

//HTML: <input type="button" class="orderBtn" value="Click Me">

const orderButton = document.querySelector(".orderBtn");
orderButton.addEventListener("click", function () {
  alert("老闆，我要一份蛋餅！");
  // 按下按鈕會跳出 老闆，我要一份蛋餅！的提示訊息
});

範例:便利商店輸入金額

HTML:<input type="text" class="money" placeholder="請輸入金額">
     <input type="button" class="payBtn" value="Click Me">
  
const input = document.querySelector(".money");
const button = document.querySelector(".payBtn");

//綁定監聽事件
button.addEventListener("click", function (e) { //click是事件名稱,function是執行函式
const amount = input.value; // 拿到使用者輸入的值
alert("客人付了：" + amount + " 元");
// 輸入100後，按下按鈕會跳出 客人付了：100 元 的提示訊息
});

流程就像：
客人在輸入框打「100」（這是資料，還沒觸發事件）
客人按下「結帳」按鈕 → 觸發 click 事件
瀏覽器執行你寫好的 function，去讀取輸入框的值並顯示出來

點擊按鈕後，觸發修改文字之行為
例一

HTML: <input type="button" class="payBtn" value="Click Me">
      <h1 class="title">點擊</h1>
  
const title = document.querySelector(".title");
const button = document.querySelector(".payBtn");

button.addEventListener("click", function (e) {
    title.textContent = "按鈕已點擊";
    //修改title文字
})

例二 加減器

//HTML
  <input type="button" class="button1" value="加">
  <input type="button" class="button2" value="減">
  <h1 class="title">0</h1>
  
  const title = document.querySelector(".title");
const button1 = document.querySelector(".button1");
const button2 = document.querySelector(".button2");

let count = 0;
button1.addEventListener("click", function (e) {
    count += 1;
    title.textContent = count;
})
button2.addEventListener("click", function (e) {
    count -= 1;
    title.textContent = count;
})

function(e)括號裡的e --就是會把當下點擊的資料的所有詳細參數紀錄

常用的 Event 種類

preventDefault()取消預設的觸發行為

想像你在超商刷會員卡，本來機器「預設」會自動列印一張長長的發票明細。但你跟店員說：「不用印，我看手機就好」——這就是 preventDefault() 在做的事：攔截「這個動作本來會自動做的事」，讓它不要發生

範例 1：阻止連結跳轉

//HTML:<a href="http://yahoo.com.tw">連結</a>

const link = document.querySelector("a");

link.addEventListener("click", function(e) {
  e.preventDefault(); // 阻止跳轉到 href
  console.log("你點了連結，但我攔下來了！");
});

範例 2：阻止表單送出後重新整理頁面

//HTML:<form>
        <input type="text" placeholder="輸入飲料名稱">
        <button type="submit">提交</button>
        </form>
        
const form = document.querySelector("form");

form.addEventListener("submit", function(e) {
  e.preventDefault(); // 阻止頁面重新整理

  const input = document.querySelector("input");
  console.log("你輸入的飲料是：" + input.value);
});

如果沒有 preventDefault()，頁面會整個重新整理，剛剛的內容就消失了；加上它之後，你就能在畫面上用 JS 自己處理這筆資料（例如印出來、加到清單），而不會被瀏覽器的預設動作打斷。